'use client';

import { useState } from 'react';
import { createPortal } from 'react-dom';
import { MemoryManager } from '@/components/memory/MemoryManager';
import { AnalyticsPanel } from '@/components/analytics/AnalyticsPanel';
import { ThemeSelector } from '@/components/theme/ThemeSelector';
import { FEATURE_TABS } from '@/lib/constants';

interface FeaturesModalProps {
  isOpen: boolean;
  onClose: () => void;
}

export function FeaturesModal({ isOpen, onClose }: FeaturesModalProps) {
  const [activeTab, setActiveTab] = useState('memory');

  const tabs = FEATURE_TABS;

  if (!isOpen) return null;

  const modalContent = (
    <div className="fixed inset-0 z-[9999] overflow-y-auto">
      {/* Background */}
      <div
        className="fixed inset-0 bg-black bg-opacity-50 transition-opacity"
        onClick={onClose}
      />

      {/* Modal */}
      <div className="flex min-h-full items-center justify-center p-4">
        <div className="relative w-full max-w-6xl transform overflow-hidden rounded-2xl bg-white dark:bg-gray-800 shadow-xl transition-all">
          {/* Header */}
          <div className="border-b border-gray-200 dark:border-gray-700 px-6 py-5 bg-gradient-to-r from-blue-50/50 to-indigo-50/50 dark:from-gray-700/50 dark:to-gray-600/50">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-3 min-w-0 flex-1">
                <div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-xl flex items-center justify-center shadow-sm flex-shrink-0">
                  <svg className="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20">
                    <path fillRule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clipRule="evenodd" />
                  </svg>
                </div>
                <div className="min-w-0 flex-1">
                  <h2 className="text-xl font-semibold text-gray-900 dark:text-white">Advanced Features</h2>
                  <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">Experience new features of the AI roleplay application</p>
                </div>
              </div>
              <button
                onClick={onClose}
                className="rounded-xl p-2.5 text-gray-400 hover:bg-white/80 dark:hover:bg-gray-700/80 hover:text-gray-600 dark:hover:text-gray-300 transition-colors shadow-sm flex-shrink-0"
              >
                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            </div>
          </div>

          {/* Tab navigation */}
          <div className="border-b border-gray-200 dark:border-gray-700">
            <div className="flex">
              {tabs.map((tab) => (
                <button
                  key={tab.id}
                  onClick={() => setActiveTab(tab.id)}
                  className={`
                    flex items-center gap-2 px-6 py-4 text-sm font-medium transition-colors
                    ${activeTab === tab.id
                      ? 'text-blue-600 border-b-2 border-blue-600 bg-blue-50 dark:bg-blue-900/20'
                      : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700'
                    }
                  `}
                >
                  <span className="text-lg">{tab.icon}</span>
                  {tab.name}
                </button>
              ))}
            </div>
          </div>

          {/* Content area */}
          <div className="p-6 max-h-[70vh] overflow-y-auto">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              {/* Left content */}
              <div className="space-y-6">
                {activeTab === 'memory' && (
                  <MemoryManager 
                    onMemorySelect={() => {}}
                  />
                )}


                {activeTab === 'analytics' && (
                  <AnalyticsPanel />
                )}

                {activeTab === 'theme' && (
                  <ThemeSelector />
                )}
              </div>

              {/* Right description */}
              <div className="bg-gray-50 dark:bg-gray-700 rounded-xl p-6">
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Feature Description</h3>
                
                {activeTab === 'memory' && (
                  <div className="space-y-4 text-sm text-gray-600 dark:text-gray-400">
                    <div>
                      <h4 className="font-medium text-gray-900 dark:text-white mb-2">Memory Management Features</h4>
                      <ul className="space-y-2">
                        <li>• Create and manage personal memories</li>
                        <li>• Categorize by type (preference, fact, emotion, goal)</li>
                        <li>• Importance rating (1-5 levels)</li>
                        <li>• Tag system for easy categorization</li>
                        <li>• Search and filter functionality</li>
                      </ul>
                    </div>
                  </div>
                )}


                {activeTab === 'analytics' && (
                  <div className="space-y-4 text-sm text-gray-600 dark:text-gray-400">
                    <div>
                      <h4 className="font-medium text-gray-900 dark:text-white mb-2">Data Analytics Features</h4>
                      <ul className="space-y-2">
                        <li>• Memory usage statistics</li>
                        <li>• Session activity analysis</li>
                        <li>• Message count statistics</li>
                        <li>• Achievement system</li>
                        <li>• Usage trend analysis</li>
                      </ul>
                    </div>
                  </div>
                )}

                {activeTab === 'theme' && (
                  <div className="space-y-4 text-sm text-gray-600 dark:text-gray-400">
                    <div>
                      <h4 className="font-medium text-gray-900 dark:text-white mb-2">Theme Settings Features</h4>
                      <ul className="space-y-2">
                        <li>• 5 preset themes</li>
                        <li>• Real-time theme switching</li>
                        <li>• Persistent theme settings</li>
                        <li>• Responsive design</li>
                        <li>• Personalized experience</li>
                      </ul>
                    </div>
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );

  // Use Portal to render to body
  if (typeof window !== 'undefined') {
    return createPortal(modalContent, document.body);
  }

  return null;
}
